<script>
//图表基本配置
import BaseConfig from '../BaseConfig';
import Ribbon from '../../../../components/ribbon/Ribbon';

export default {
  name: 'BasicConfig',
  components: {
    Ribbon,
  },
  mixins: [BaseConfig],
  data() {
    return {
      theme: [],
    };
  },
  created() {
    this.theme = this.chartOptions.extend.color;
  },
  methods: {
    updateTheme() {
      this.chartOptions.extend.color = this.theme;
      this.updateOptions();
    },
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>主题：</span>
      </Col>
      <Col span="16">
      <Ribbon
        v-model="theme"
        @on-change="updateTheme"
      ></Ribbon>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>图表背景：</span>
      </Col>
      <Col span="16">
      <ColorPicker
        v-model="chartOptions.extend.backgroundColor"
        alpha
        @on-change="updateOptions"
      ></ColorPicker>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>字体大小：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.textStyle.fontSize"
        :min="8"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>字体颜色：</span>
      </Col>
      <Col span="16">
      <ColorPicker
        v-model="chartOptions.extend.textStyle.color"
        @on-change="updateOptions"></ColorPicker>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>上边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.grid.top"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>下边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.grid.bottom"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>左边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.grid.left"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>右边距：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.extend.grid.right"
        @on-change="updateOptions"></InputNumber>
      </Col>
    </Row>
  </div>
</template>

<style>
</style>
